import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaAlertPage, WeaTableEdit, WeaProgress, WeaRightMenu, WeaTop, WeaSearchGroup, WeaFormItem, WeaTools, WeaInput, WeaBrowser, WeaNewScroll } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { Button, Spin } from 'antd';
import * as Fctt from '../constants/BaseFormConstant';

const comTypes = WeaTools.types;
const getKey = WeaTools.getKey;

export default class BaseForm extends React.Component {
  constructor(props) {
    super(props);
  }

  getStore() {

  }

  // render before
  componentWillMount() {
    this.getStore().componentWillMount(this.props);
  }

  // render after
  componentDidMount() {
    this.getStore().componentDidMount();
  }

  // component remove before
  componentWillUnmount() {
    this.getStore().componentWillUnmount();
  }

  render() {
    const store = this.getStore();
    const { loading, verified, status, errorMsg, viewTop, titleName, titleIcon, form } = store;
    const loadingCom = <div style={{ position: 'absolute', width: '100%', top: '48%', textAlign: 'center' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5veaui`} spinning={loading} /></div>;
    let content = [];
    if (verified && status == 'failed') {
      content = [(<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@v8evt1@alert`} ><div style={{ color: '#000' }}>{errorMsg}</div></WeaAlertPage>)];
    } else if (verified && form && form.isFormInit) {
      if (loading) {
        content.push(loadingCom);
      }
      // console.log("BaseForm rendered");
      const formComs = this.getFormComs();
      const formComsSub = this.getFormComsSub();
      const rightMenus = store.getRightMenus();
      const topButtons = store.getTopButtons();
      content.push(
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@7s5p8z@rm`} datas={rightMenus}>
          {
            viewTop && (<WeaTop
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@unx1q7@top`}
              loading={loading}
              title={titleName}
              icon={<i className={'icon-coms-crm'} />}
              iconBgcolor="#96358a"
              showDropIcon
              dropMenuDatas={rightMenus}
              buttons={topButtons}
              buttonSpace={10}
            />)
          }
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@76hsc0@scroll`} height={'100%'}>
            {formComs}
            {formComsSub}
          </WeaNewScroll>
        </WeaRightMenu>,
      );
    } else {
      content = [loadingCom];
    }
    return content;
  }

  getFormComs() {
    const store = this.getStore();
    const { formItemGroups, form } = store;
    const groups = [];
    if (formItemGroups) {
      const { isFormInit } = form;
      const formParams = form.getFormParams();
      isFormInit && toJS(formItemGroups).map((c,indexGroup) => {
        const items = [];
        c.items.map((field, index) => {
          field = store.reDefineField(field);
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@n0palo@${index}`}
              error={form.getError(field)}
              tipPosition="bottom"
              label={`${field.label}`}
              labelCol={{ span: `${field.labelcol}` }}
              wrapperCol={{ span: `${field.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@c8jcj2@${index}`} fieldConfig={field} form={form} formParams={formParams} onChange={(fieldObj) => { store.formFieldChange(fieldObj); }} onBlur={(fieldObj) => { store.formFieldBlur(fieldObj); }} />
            </WeaFormItem>),
            col: c.col,
          });
        });
        groups.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@opv9xz@${indexGroup}`} needTigger title={c.title} showGroup={c.defaultshow} items={items} />);
      });
    }
    return groups;
  }

  getFormComsSub() {
    const store = this.getStore();
    const { form, subTables, productColumns, customDatas } = store;
    const arr = [];
    const that = this;
    subTables && subTables.length > 0 && toJS(subTables).map((subTable) => {
      arr.push(<div />);
    });
    	return arr;
  }
}
